<template>
	<view class="m-search-box">
		<text class="iconfont icon-a-Frame1073" style="font-size: 32rpx; color: #121317"></text>
		<view v-if="!isSearch" class="uni-input" @click.stop="goSearch()">{{ searchVal || placeholder }}</view>
		<template v-else>
			<input
				v-model="searchVal"
				@blur="_blur"
				@input="_input"
				placeholder-style="color: #858688;font-size: 14px"
				class="uni-input"
				confirm-type="search"
				:placeholder="placeholder"
			/>
			<!-- 搜索选择列表 -->
			<view class="search-list-box" v-if="isShowList">
				<template v-if="searchList&&searchList.length">
					<view class="search-list-li" v-for="(item, index) in searchList" :key="index" @click.stop="checkInfo(item)">
						<text>{{ apiInfo.checklabel ? item[apiInfo.checklabel] : item }}</text>
					</view>
				</template>
				<view v-else class="default_text">没找到符合的内容</view>
			</view>
		</template>
		
	</view>
</template>

<script>
export default {
	name: 'mSearch',
	props: {
		placeholder: { default: '请输入专科专业查询' },
		apiInfo: {
			default: () => {}
		},
		val: { default: '' },
		isSearch: {default: false}
	},
	data() {
		return {
			isShowList: false,
			searchList: [],
			chooseInfo: {},
			// valid: true,
			setTime: null,
			searchVal: ''
		};
	},
	watch:{
		val(curr){
			this.searchVal = curr;
		}
	},
	mounted(){
		this.searchVal = this.val || '';
	},
	methods: {
		goSearch(){
			let that = this;
			that.applicationRewritingNavigateTo({
                url: '/pages/applicationPage/searchPages'
            });
		},
		checkInfo(item) {
			this.isShowList = false;
			this.searchVal = this.apiInfo.checklabel ? item[this.apiInfo.checklabel] : item;
			this.$emit('check', item);
		},
		_blur() {
			let that = this;
			if (that.apiInfo.api) return;
			that.searchVal = that.searchVal.replace(/\s*/g, '');
			that.isShowList = false;
			that.$emit('check', that.searchVal);
		},
		_input() {
			let that = this;
			that.searchVal = that.searchVal.replace(/\s*/g, '');
			clearTimeout(that.setTime);
			if (!that.searchVal) {
				this.checkInfo('');
				return;
			}
			that.setTime = setTimeout(async () => {
				if (that.apiInfo.api) {
					await that.getMajorList();
				}
				clearTimeout(that.setTime);
			}, 500);
		},
		// 查询列表
		async getMajorList() {
			let that = this;
			if (!that.apiInfo.api) return [];
			let obj = {};
			obj[that.apiInfo.data] = that.searchVal;
			let { code, data } = await that.$application_api[that.apiInfo.api](obj);
			if (code != 0) return;
			that.searchList = data;
			that.isShowList = true;
		},
		throttle(fn, delay) {
			let valid = true;
			return function () {
				if (valid) {
					//如果阀门已经打开，就继续往下
					setTimeout(() => {
						fn.apply(this, arguments); //定时器结束后执行
						valid = true; //执行完成后打开阀门
					}, delay);
					valid = false; //关闭阀门
				}
			};
		}
	}
};
</script>

<style lang="scss" scoped>
.m-search-box {
	width: 100%;
	height: 44px;
	padding: 14rpx 15rpx;
	box-sizing: border-box;
	border: 2rpx solid #f1f1f1;
	border-radius: 10px;
	background-color: #fbfbfb;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	position: relative;
}
.uni-input {
	font-size: 14px;
	color: #121317;
	margin-left: 12rpx;
	flex: 1;
}

.search-list-box {
	position: absolute;
	top: 44px;
	left: 50%;
	z-index: 99999;
	width: 100%;
	background-color: #ffffff;
	border-radius: 5rpx;
	transform: translate(-50%, 13rpx);
	box-shadow: 0 1px 6px #ccc;
	padding: 40rpx;
	padding-bottom: 0;
	box-sizing: border-box;
	overflow: hidden;
	max-height: 30vh;
	overflow-y: auto;
}
.search-list-li {
	margin-bottom: 28rpx;
	font-size: $font-size-D;
	color: $font-color-main-A;
}

.default_text{
	font-size: $font-size-D;
	color: $font-color-main-A;
	font-weight: bold;
	text-align: center;
	margin-bottom: 28rpx;
}
</style>
